<script>
import { mapGetters } from 'vuex';
import * as types from '../../../store/types';
import TextToolbar from '../cardtoolbar/TextToolbar';
import ControlTools from './ControlTools.js';

//文本组件
export default {
  name: 'TextItem',
  components: {
    TextToolbar,
  },
  mixins: [ControlTools],
  props: {
    //itemConfig.text 文本内容
    //itemConfig.style 文本样式
    itemConfig: {
      type: Object,
      default: () => {},
    },
    //图表配置项ID
    chartId: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      itemMode: 'view',
      itemText: this.itemConfig.text,
      selection: null,
    };
  },
  computed: {
    ...mapGetters(['controls']),
    control() {
      return this.controls[this.chartId];
    },
    editable() {
      return this.itemText || this.itemMode == 'edit';
    },
  },
  methods: {
    //保存文本配置
    saveText() {
      this.control.options.text = this.$refs.content.innerHTML;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: this.control },
      });
    },
  },
};
</script>

<template>
  <div
    class="text-item-wrapper">
    <TextToolbar
      v-if="hideTools"
      :chart-id="chartId"
      class="layout-toolbar">
    </TextToolbar>
    <div
      v-if="editable"
      ref="content"
      :style="itemConfig.style"
      :contenteditable="hideTools?true:false"
      class="text-item-edit"
      @blur="saveText"
      v-html="itemText">
    </div>
    <div
      v-else
      class="text-item-empty"
      @click="itemMode='edit'">
      单击此处添加文本
    </div>
  </div>
</template>

<style lang="less">
.text-item-wrapper {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  .text-item-edit,
  .text-item-empty {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .text-item-edit {
    height: 100%;
    padding: 10px;
    outline: 0;
    border: none;
    cursor: text;
  }
  .text-item-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999999;
    cursor: pointer;
  }
  .layout-toolbar {
    display: none !important;
  }
}
</style>
